<template>
	<view class="container">
		<view class="address_list">
			<radio-group @change="changeDefaultAddress" >
				<view class="address_item" v-for="(item,index) in addressList" :key="index" @click="toSelected(item)">
					<view class="top">
						<text>{{item.name}}</text><text style="margin-left: 20rpx;">{{item.mobile}}</text>
					</view>
					<view class="center">
						{{item.formatted_address}}{{item.address}}
					</view>
					<view class="bottom">
						<view class="default" @tap.stop.prevent>
							<radio :value="String(item.id)" :checked="item.default === '1'" color="#fe4b20">默认地址</radio>
						</view>
						<view class="options">
							<view class="option" style="margin-right: 65rpx;" @click.stop="toAddressEdit(item.id)">
								<view class="icon">
									<image src="../../static/icon_edit.png" mode="widthFix"></image>
								</view>
								<view class="option_name">
									编辑
								</view>
							</view>
							<view class="option" @click.stop="delAddress(item.id)">
								<view class="icon">
									<image src="../../static/icon_del.png" mode="widthFix"></image>
								</view>
								<view class="option_name">
									删除
								</view>
							</view>
						</view>
					</view>
				</view>
			</radio-group>
		</view>
		<view class="add_btn">
			<button type="default"class="btn" @click="toAddressEdit()"><image src="../../static/icon_add.png" mode="widthFix" style="margin-right: 10rpx;"></image>新增收货地址</button>
		</view>
	</view>
</template>

<script>
	import {getaddress,deladdress,addressDefault} from '../../api/api.js'
	export default {
		data() {
			return {
				type:'', //'chooseAddress' 订单页面选择地址
				addressList:[]
			}
		},
		onLoad(options){
			if(options.type){
				this.type = options.type
			}
			
		},
		onShow(){
			this.getaddress()
		},
		methods:{
			getaddress(){
				getaddress().then(res=>{
					console.log(res)
					this.addressList = res.data.data.data
				})
			},
			changeDefaultAddress(event){
				addressDefault({id:event.detail.value}).then(res=>{
					console.log(res)
					this.getaddress()
				})
			},
			delAddress(id){
				deladdress({id}).then(res=>{
					this.getaddress()
				})
			},
			toSelected(address){
				console.log(address)
				if(this.type == 'chooseAddress') {
					 // 1. 获取当前页面栈实例（此时最后一个元素为当前页）
					 let pages = getCurrentPages() 
					 // 2. 上一页面实例
						// 注意是length长度，所以要想得到上一页面的实例需要 -2
						// 若要返回上上页面的实例就 -3，以此类推
					 let prevPage = pages[pages.length -2] 
					 // 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
					 prevPage.$vm.getSelectedAddress(address) 
					 // 4. 返回上一页面
					 uni.navigateBack({
						 delta: 1 // 返回的页面数
					 })
				}
			},
			toAddressEdit(id){
				let options = ''
				if(id){
					options = '?id=' + id
				}
				uni.navigateTo({
					url:'/pages/my/addressEdit/addressEdit' + options
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	background-color: #F8F8F8;
	padding: 0 30rpx;
	min-height: calc(100vh - env(safe-area-inset-top));
	overflow: hidden;
	font-size: 28rpx;
	.address_item {
		background: #FFFFFF;
		box-shadow: 0px 6rpx 18rpx 0px rgba(0,0,0,0.1);
		border-radius: 12rpx;
		margin-top: 20rpx;
		padding: 30rpx 20rpx;
		.center {
			padding-top: 35rpx;
			padding-bottom: 39rpx;
			border-bottom: 2rpx solid #EEEEEE;
			display: flex;
		}
		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 36rpx;
			.options {
				display: flex;
				align-items: center;
				.option {
					display: flex;
					align-items: center;
					.icon {
						margin-right: 11rpx;
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
	image {
		width: 28rpx;
		height: 29rpx;
	}
	.add_btn {
		margin-top: 76rpx;
		height: 100rpx;
		width: 100%;
		.btn {
			width: 88%;
			height: 100%;
			background: #FE4B20;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}
	
</style>
